<template>
    <div>
    搜索：<el-input placeholder="请输入地址" v-model='addressSearch' @keyup.native="searchItem" style='margin-bottom: 10px;width: 300px;'></el-input>
        <el-button type='' @click='searchItem({keyCode:13})'>搜索</el-button>
        <el-input style='width: 80px;' v-model="pointParams.lng" disabled placeholder="经度"></el-input>
        <el-input style='width: 80px;' v-model='pointParams.lat' disabled placeholder="维度"></el-input>
        <el-button type='primary' @click='enterGPS'>确定经纬度</el-button>
        <baidu-map @click='clickMap' id='map' :scroll-wheel-zoom='true' :inertial-dragging='true' class="bm-view" :center="center" :zoom='zoom' @ready="handler" ak="NOGaZROmp3tjq8wG3chEw8U98OjrkkEV">
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="false"></bm-geolocation>
        </baidu-map>
        <loading v-if='loading' :tip='tip'></loading>
    </div>
</template>
<script>
    import {BaiduMap,BmGeolocation} from 'vue-baidu-map';
    import loading from '@/components/common/loading.vue';
    export default{
        data(){
            return{
                addressSearch:'',
                loading:false,
                tip:'',
                center: {lng: 0, lat: 0},
                zoom: 15,
                map:'',
                point:'',
                pointParams:{
                    lng:0,
                    lat:0,
                }
            }
        },
        components:{
            BaiduMap,
            BmGeolocation,
            loading
        },
        methods: {
            searchItem(e){
                var code=e.keyCode;
                if(code==13){
                    var local = new BMap.LocalSearch(this.map, {
                        renderOptions:{map: this.map}
                    });
                    local.search(this.addressSearch);
                }
            },
            handler ({BMap, map}) {
                var self=this;
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15;
                this.map=new BMap.Map('map');
                this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
                this.map.enableScrollWheelZoom(true);
                var myCity = new BMap.LocalCity();
                myCity.get(myFun);//获取自己的位置，实现自动定位
                function myFun(result) {  
                    var cityName = result.name;  
                    self.map.setCenter(cityName);//地图根据城市名称会重新自动定位
                } 
                this.map.addEventListener('click',(e)=>{
                    var allOverlay = this.map.getOverlays();
                    allOverlay.map(item=>{
                        this.map.removeOverlay(item);
                    })
                    var point=e.point;
                    this.pointParams.lng=point.lng;
                    this.pointParams.lat=point.lat;
                    this.point=new BMap.Point(this.pointParams.lng,this.pointParams.lat);
                    this.map.centerAndZoom(this.point);
                    var marker=new BMap.Marker(this.point);
                    this.map.addOverlay(marker); 
                    // //console.log(this.map);  
                })
            },
            clickMap(e){
                //console.log(e)
            },
            enterGPS(){
                this.$emit('enter',this.pointParams);
            }
        },
        mounted(){
            window.onload=function(){
                window.addEventListener('keydown',(e)=>{
                    //console.log(e);
                })
            }
        }
    }
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 600px;
}
</style>
